
<template>
  <div id="menulist">
    <div class="container">
      <div class="m-sel">
        <li @click="menusel" v-show="turn">精选</li>
        <li @click="memunew" v-show="turn">最新</li>
        <li   @click="backmenu" v-show="!turn">返回</li>
      </div>
      <div class="grid-content bg-purple-light">
        <div class="m-list">
          <router-link
            class="products"
            tag="li"
            :to="{ name: 'menuchild', params: { id: menu.menuId } }"
            v-for="menu in currentPageData"
            :key="menu.menuId"
          >
            <a class="menuImg">
              <div class="ml-bigimg">
                <img :src="'/api/upload/' + menu.menuBigImg" alt class="productsimg" />
              </div>
              <div class="relative">
                <a class="menu_name">{{ menu.menuName }}</a>
                <p>
                  <a>
                    <img :src="'/api/upload/' + menu.userImg" alt />
                    {{ menu.userName }}
                  </a>
                </p>
                <div class="view-coll">
                  <span class="el-icon-view">{{ menu.focusNum }}</span>

                  <span class="el-icon-star-on">{{ menu.fansNum }}</span>
                </div>
              </div>
            </a>
          </router-link>
        </div>
      </div>
      <div class="m-page">
        <button @click="prevPage()">上一页</button>
        <span>第{{currentPage}}页/共{{totalPage}}页</span>
        <button @click="nextPage()">下一页</button>
      </div>
    </div>
  </div>
</template>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
export default {
  data() {
    return {
      turn:true,
      menuvalue: 0,
      menus: [],
      //  productList, //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 9, // 每页显示数量
      currentPageData: [] //当前页显示内容
    };
  },
  created() {
    this.$axios
      .get("/api/createMenu/getDataMenu")
      .then(res => {
        console.log("res:", res);
        this.menus = res.data.data;
        // 计算一共有几页
        this.totalPage = Math.ceil(this.menus.length / this.pageSize) || 1;
        console.log(this.totalPage);
        // 计算得0时设置为1
        this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
         (this.currentPage = 1), 
        this.setCurrentPageData();
      })
      .catch(err => {
        console.log("err:", err);
      });
    if (this.$route.params.id) {
      
      this.menuvalue = this.$route.params.id;
     
      this.$axios
        .get("/api/getSearchMenus", { params: { id: this.menuvalue } })
        .then(res => {
          console.log("res:", res);
          this.menus = res.data.data;
          // 计算一共有几页
          this.totalPage = Math.ceil(this.menus.length / this.pageSize) || 1;
          console.log(this.totalPage);
          // 计算得0时设置为1
          this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
           (this.currentPage = 1), 
          this.setCurrentPageData();
        })
        .catch(err => {
          console.log("err:", err);
        });
    }
    if (localStorage["homeSearch"]) {
      this.menuvalue = localStorage["homeSearch"];
      this.$axios
        .get("/api/getSearchMenus", { params: { id: this.menuvalue } })
        .then(res => {
          console.log("res:", res);
          this.menus = res.data.data;
          // 计算一共有几页
          this.totalPage = Math.ceil(this.menus.length / this.pageSize) || 1;
          console.log(this.totalPage);
          // 计算得0时设置为1
          this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
          this.setCurrentPageData();
        })
        .catch(err => {
          console.log("err:", err);
        });
        localStorage.removeItem('homeSearch')
    }
  },
  watch: {
    $route(to, from) {
      this.$router.go(0);
    },
     menuvalue:{
       handler(a, b){
         if(this.$route.params.id){
           this.turn=false
         }
       }
     }
  },

  methods: {
    //精选筛选
    menusel() {
      // this.$router.push("/menu/menulist");
      this.$axios
        .get("/api/createMenu/getDataMenu")
        .then(res => {
          console.log("res:", res);
          this.menus = res.data.data;
          (this.currentPage = 1), 
          this.setCurrentPageData();
        })
        .catch(err => {
          console.log("err:", err);
        });
    },
    //最新筛选
    memunew() {
      // this.$router.push("/menu/menulist");
      this.$axios
        .get("/api/createMenu/getDataMenuTime")
        .then(res => {
          console.log("res:", res);
          this.menus = res.data.data;
          (this.currentPage = 1), 
          this.setCurrentPageData();
        })
        .catch(err => {
          console.log("err:", err);
        });
    },
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData() {
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageData = this.menus.slice(begin, end);
    },
    //上一页
    prevPage() {
      console.log(this.currentPage);
      if (this.currentPage == 1) {
        return;
      } else {
        this.currentPage--;
        this.setCurrentPageData();
      }
    },
    // 下一页
    nextPage() {
      console.log(this.currentPage);
      if (this.currentPage == this.totalPage) return;

      this.currentPage++;
      this.setCurrentPageData();
    },
    backmenu(){
    this.$router.push('/menu/menulist');
  }

  },
  
};
</script>
<style lang="scss" scoped>
.m-sel {
  width: 100%;
  height: 50px;
  
}
.m-sel li {
  float: left;
  list-style: none;
  border: none;
  width: 70px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  background: none;
  text-align: center;
  cursor: pointer;
}
.m-sel li:hover {
  border-bottom: 2px solid #E6A23C;
  color: #E6A23C;
}

.products {
  float: left;
  width: 33%;
  margin: 20px auto;
  text-align: center;
}
.ml-bigimg {
  width: 95%;
  height: 220px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #E6A23C;
}
.productsimg {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.39, 0.58, 0.57, 1);
}
.productsimg:hover {
  transform: scale(1.1);
}
.relative {
  width: 95%;
  float: left;
  padding-left: 0px;
  margin-top: 20px;
}
.menu_name {
  display: inline-block;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  text-align: left;
}
// .menu_name:hover {
//   text-decoration: none;
//   color: #6b9d19;
// }
.text-div {
  margin: 0 auto;
}

.relative img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: bottom;
}

.relative p {
  font-size: 16px;
  float: left;
}

.relative p a {
   font-size: 16px;
  color: #9b9898;
  width: 150px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-coll {
  color: #9b9898;
  float: right;
  font-size: 16px;
  /* margin-top: 40px; */
}

.view-coll img {
  width: 18px;
  height: 18px;
  vertical-align: bottom;
}
.m-page {
  margin: 50px 0 ;
  clear: both;
  text-align: center;
}
.m-page span{
  margin: 5px;
  color: #555;
  font-size: 16px;
}
.m-page button{
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding:6px;
  margin: 0 7px;
  font-size: 16px;
  cursor: pointer;
  color: #555;
}
.m-page button:hover{
  border: 1px solid #E6A23C;
  color: #E6A23C;
}
</style>